<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('系统管理员操作界面')"/>
    <!--<th:block th:include="include :: select2-css" />-->
    <th:block th:include="include :: bootstrap-select-css"/>
    <style type="text/css">
        /* banner */
        .c-banner {
            width: 100%;
            position: relative;
        }

        .c-banner img {
            width: 100%;
        }

        .c-banner .banner ul {
            list-style: none;
            padding-left: 0px;
            margin-bottom: 0px;
        }

        .c-banner .banner ul li {
            position: absolute
            display: none;
            opacity: 0;
        }

        .c-banner .banner ul li:nth-child(1) {
            opacity: 1;
            display: block;
        }

        .c-banner .banner ul li img {
            width: 100%;
            position: absolute;
            top: 0px;
        }

        .c-banner .banner ul li:first-child img {
            position: relative;
        }

        .c-banner .nexImg, .c-banner .preImg {
            padding: 25px 10px 25px 10px;
            position: absolute;
            top: 50%;
            margin-top: -53px;
            background: #000000;
            opacity: 0.5;
            border-radius: 5px;
            z-index: 10;

        }

        .c-banner .nexImg:hover, .c-banner .preImg:hover {
            opacity: 0.8;
        }

        .c-banner .nexImg {
            right: 0px;
        }

        .c-banner .nexImg img, .c-banner .preImg img {
        }

        .c-banner .jumpBtn {
            width: 100%;
            position: absolute;
            bottom: 20px;
            text-align: center;
        }

        .c-banner .jumpBtn ul {
            margin-bottom: 0px;
            padding: 0px;
        }

        .c-banner .jumpBtn ul li {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            background-color: white;
            opacity: 0.9;
            margin-left: 10px;
        }

        .c-banner .jumpBtn ul li:first-child {
            margin-left: 0px;
        }

        @media screen and (max-width: 768px) {
            .c-banner {
                width: 100%;
                height: 200px;
                overflow: hidden;
            }
            .c-banner .banner ul li img {
                width: 768px;
                height: 200px;
                position: absolute;
            }
        }

        *{padding:0; margin:0;}
        html,body{font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;margin:0;padding:0;text-decoration:none;}
        body{font: 14px/1.5 "Microsoft YaHei","Lucida Sans Unicode","Myriad Pro","Hiragino Sans GB","Heiti SC",Verdana,simsun;-webkit-text-size-adjust: none;background:#fff;color:#333;min-width:320px;}
        body,div,dl,dt,dd,.mainmenu,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,table{margin:0;padding:0;}
        img {max-width:100%;display:block;border:0;vertical-align:middle;}
        i,em{font-style:normal}
        a{text-decoration:none;blr:expression(this.onFocus=this.blur());outline:none}
        ul,ol,li,dl{list-style-type:none;}

        .content{clear:both; padding:10px}
        .content .text_a{width: 100%;}
        .content .text_a a{display: block;width: 23.5%;float: left; background: #ff756b;text-align: center;color: #fff;line-height: 35px;font-size: 16px;}
        .content .text_a a:nth-child(2), .content .text_a a:nth-child(3), .content .text_a a:nth-child(4){margin-left: 2%;}
        .content .text_a a.active{background-color: #f9493c;}
        .content .match_page {width: 100%;overflow: hidden;}
        .content .list_box{position:relative;}
        .content .list_box li{width:49.9%;float: left;box-sizing:border-box;margin-bottom: 10px;}
        .content .list_box li>div{margin: 0 5px;position: relative;background-color: #ff756b;}
        .content .list_box li>div .number {display: block;width: 70px;height: 30px;background: #ff756b;position: absolute;color: #fff;text-align: center;line-height: 32px;top: 0;right: 4%;}
        .content .list_box li>div .number:after {content: '';width: 0;height: 0;position: absolute;top: 30px;right: 0;border-top: 10px solid #ff756b;border-left: 35px solid transparent;border-right: 35px solid transparent;}
        .content .list_box li.mr0{margin-right: 0;}
        .content .list_box li img{width: 100%;position:relative}
        .content .list_box li a.img{display: block; padding: 35% 20% 35% 20%;position: absolute}
        .content .list_box li a svg{display: block; padding: 20%;position: absolute}
        .content .list_box li a.vote{padding-top:15%;float: right; width: 30%; height: 150px; line-height: 1.5; color: #fff; font-size: 28px; text-align :center ;}

        .content .list_box li span{display:block;}
        .content .list_box li .piao{position:absolute;z-index:1000;top:0px;left:0px;display:block;background-color:#e4393c;color:#fff;padding:2%;font-size:14px;}
        .content .list_box li .tou{clear:both; color:#fff; height:150px; width:100%;}
        .content .list_box li .tou .divP{overflow:hidden;text-overflow:ellipsis;white-space: nowrap;float:left;width:60%; text-indent:0.5em;height:50px}
        .content .list_box li .tou .divP span{ line-height:24px}
        .clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }
        .clearfix:after {content: " ";clear: both;display: block;height: 0;visibility: hidden; }
    </style>
</head>
<body>

<div class="c-banner">
    <div class="banner">
        <ul>
            <li><img src="img/lunbo1.jpg"></li>
            <li><img src="img/lunbo2.jpg"></li>
            <li><img src="img/lunbo3.jpg"></li>
        </ul>
    </div>
    <!--<div class="nexImg">-->
    <!--<img src="img/nexImg.png" />-->
    <!--</div>-->
    <!--<div class="preImg">-->
    <!--<img src="img/preImg.png" />-->
    <!--</div>-->
    <div class="jumpBtn">
        <ul>
            <li jumpImg="0"></li>
            <li jumpImg="1"></li>
            <li jumpImg="2"></li>
        </ul>
    </div>
</div>

<div class="content">
    <div id="pageCon" class="match_page masonry" style="padding-bottom: 30px">
        <ul class="list_box masonry clearfix" >
            <li class="picCon masonry-brick">
                <div>
                    <a href="https://192.168.0.58:9090/scan" class="img">
                        <svg width="5em" height="5em" viewBox="0 0 16 16" class="bi bi-text-indent-right" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708l2-2zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5zm0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z"/>
                        </svg>
                    </a>
                    <div class="tou" style="background-color:#1c84c6">
                        <a href="javascript:void(0)" style="background: #0000ff" class="vote">设备添加</a>
                    </div><!--/tou-->
                </div>
            </li>
            <li class="picCon masonry-brick">
                <div>
                    <a href="javascript:void(0)" class="img">
                        <svg width="5em" height="5em" viewBox="0 0 16 16" class="bi bi-tools" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M0 1l1-1 3.081 2.2a1 1 0 0 1 .419.815v.07a1 1 0 0 0 .293.708L10.5 9.5l.914-.305a1 1 0 0 1 1.023.242l3.356 3.356a1 1 0 0 1 0 1.414l-1.586 1.586a1 1 0 0 1-1.414 0l-3.356-3.356a1 1 0 0 1-.242-1.023L9.5 10.5 3.793 4.793a1 1 0 0 0-.707-.293h-.071a1 1 0 0 1-.814-.419L0 1zm11.354 9.646a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708-.708l-3-3z"/>
                            <path fill-rule="evenodd" d="M15.898 2.223a3.003 3.003 0 0 1-3.679 3.674L5.878 12.15a3 3 0 1 1-2.027-2.027l6.252-6.341A3 3 0 0 1 13.778.1l-2.142 2.142L12 4l1.757.364 2.141-2.141zm-13.37 9.019L3.001 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z"/>
                        </svg>
                    </a>
                    <div class="tou" style="background-color: #109d00">
                        <a href="javascript:void(0)" style="background: #00ff00" class="vote">设备维护</a>
                    </div><!--/tou-->
                </div>
            </li>
            <li class="picCon masonry-brick">
                <div>
                    <a href="javascript:void(0)" class="img">
                        <svg width="5em" height="5em" viewBox="0 0 16 16" class="bi bi-box-arrow-in-up" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4.646 7.854a.5.5 0 0 0 .708 0L8 5.207l2.646 2.647a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708z"/>
                            <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-1 0v9a.5.5 0 0 0 .5.5z"/>
                            <path fill-rule="evenodd" d="M1.5 2.5A1.5 1.5 0 0 1 3 1h10a1.5 1.5 0 0 1 1.5 1.5v8A1.5 1.5 0 0 1 13 12h-1.5a.5.5 0 0 1 0-1H13a.5.5 0 0 0 .5-.5v-8A.5.5 0 0 0 13 2H3a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h1.5a.5.5 0 0 1 0 1H3a1.5 1.5 0 0 1-1.5-1.5v-8z"/>
                        </svg>
                    </a>
                    <div class="tou" style="background-color: #605ca8">
                        <a href="javascript:void(0)" style="background: #722ed1" class="vote">设备升级</a>
                    </div><!--/tou-->
                </div>
            </li>
            <li class="picCon masonry-brick">
                <div>
                    <a href="javascript:void(0)" class="img">
                        <svg width="5em" height="5em" viewBox="0 0 16 16" class="bi bi-trash" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
                        </svg>
                    </a>
                    <div class="tou" style="background-color: #a6e1ec">
                        <a href="javascript:void(0)" style="background: #5897fb" class="vote">设备报废</a>
                    </div><!--/tou-->
                </div>
            </li>
        </ul>
    </div>
</div>
<div style="text-align:center;margin:-40px 0; font:normal 20px/24px 'MicroSoft YaHei';">
    <p>海王国安信息管理部</p>
    <p>2020-07</a></p>
</div>
<th:block th:include="include :: footer"/>
<!--<th:block th:include="include :: select2-js" />-->
<th:block th:include="include :: bootstrap-select-js"/>
<script th:src="@{/ruoyi/js/jquery.masonry.min.js}"></script>
<script type="text/javascript">
    //定时器返回值
    var time = null;
    //记录当前位子
    var nexImg = 0;
    //用于获取轮播图图片个数
    var imgLength = $(".c-banner .banner ul li").length;
    //当时动态数据的时候使用,上面那个删除
    // var imgLength =0;
    //设置底部第一个按钮样式
    $(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");

    //页面加载
    $(document).ready(function () {
        // dynamicData();
        //启动定时器,设置时间为3秒一次
        time = setInterval(intervalImg, 3000);
    });

    //点击上一张
    $(".preImg").click(function () {
        //清楚定时器
        clearInterval(time);
        var nowImg = nexImg;
        nexImg = nexImg - 1;
        console.log(nexImg);
        if (nexImg < 0) {
            nexImg = imgLength - 1;
        }
        //底部按钮样式设置
        $(".c-banner .jumpBtn ul li").css("background-color", "white");
        $(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");

        //将当前图片试用绝对定位,下一张图片试用相对定位
        $(".c-banner .banner ul img").eq(nowImg).css("position", "absolute");
        $(".c-banner .banner ul img").eq(nexImg).css("position", "relative");

        //轮播淡入淡出
        $(".c-banner .banner ul li").eq(nexImg).css("display", "block");
        $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity": 1}, 1000);
        $(".c-banner .banner ul li").eq(nowImg).stop().animate({"opacity": 0}, 1000, function () {
            $(".c-banner ul li").eq(nowImg).css("display", "none");
        });

        //启动定时器,设置时间为3秒一次
        time = setInterval(intervalImg, 3000);
    })

    //点击下一张
    $(".nexImg").click(function () {
        clearInterval(time);
        intervalImg();
        time = setInterval(intervalImg, 3000);
    })

    //轮播图
    function intervalImg() {
        if (nexImg < imgLength - 1) {
            nexImg++;
        } else {
            nexImg = 0;
        }

        //将当前图片试用绝对定位,下一张图片试用相对定位
        $(".c-banner .banner ul img").eq(nexImg - 1).css("position", "absolute");
        $(".c-banner .banner ul img").eq(nexImg).css("position", "relative");

        $(".c-banner .banner ul li").eq(nexImg).css("display", "block");
        $(".c-banner .banner ul li").eq(nexImg).stop().animate({"opacity": 1}, 1000);
        $(".c-banner .banner ul li").eq(nexImg - 1).stop().animate({"opacity": 0}, 1000, function () {
            $(".c-banner .banner ul li").eq(nexImg - 1).css("display", "none");
        });
        $(".c-banner .jumpBtn ul li").css("background-color", "white");
        $(".c-banner .jumpBtn ul li[jumpImg=" + nexImg + "]").css("background-color", "black");
    }

    //轮播图底下按钮
    //动态数据加载的试用应放在请求成功后执行该代码,否则按钮无法使用
    $(".c-banner .jumpBtn ul li").each(function () {
        //为每个按钮定义点击事件
        $(this).click(function () {
            clearInterval(time);
            $(".c-banner .jumpBtn ul li").css("background-color", "white");
            jumpImg = $(this).attr("jumpImg");
            if (jumpImg != nexImg) {
                var after = $(".c-banner .banner ul li").eq(jumpImg);
                var befor = $(".c-banner .banner ul li").eq(nexImg);

                //将当前图片试用绝对定位,下一张图片试用相对定位
                $(".c-banner .banner ul img").eq(nexImg).css("position", "absolute");
                $(".c-banner .banner ul img").eq(jumpImg).css("position", "relative");

                after.css("display", "block");
                after.stop().animate({"opacity": 1}, 1000);
                befor.stop().animate({"opacity": 0}, 1000, function () {
                    befor.css("display", "none");
                });
                nexImg = jumpImg;
            }
            $(this).css("background-color", "black");
            time = setInterval(intervalImg, 3000);
        });
    });

    //动态数据轮播图
    //动态数据加载的时候不要直接点击demo.html运行否则可能请求不到本地json数据
    // function dynamicData(){
    // 	$.ajax({
    // 		url:"js/test.json",
    // 		type:"get",
    // 		dataType:"json",
    // 		success:function(data){
    // 			if(data.code==1){
    // 				var data = data.data;
    // 				$.each(data,function(i){
    // 					$(".c-banner .banner ul").append('<li><img src="'+this.img+'"></li>');
    // 					$(".c-banner .jumpBtn ul").append('<li jumpImg="'+i+'"></li>')
    // 				})
    // 			}
    // 			//获取图片总数量
    // 			imgLength = $(".c-banner .banner ul li").length;
    // 			//为底部按钮定义单击事件
    // 			$(".c-banner .jumpBtn ul li").each(function(){
    // 				//为每个按钮定义点击事件
    // 				$(this).click(function(){
    // 					clearInterval(time);
    // 					$(".c-banner .jumpBtn ul li").css("background-color","white");
    // 					jumpImg = $(this).attr("jumpImg");
    // 					if(jumpImg!=nexImg){
    // 						var after =$(".c-banner .banner ul li").eq(jumpImg);
    // 						var befor =$(".c-banner .banner ul li").eq(nexImg);
    //
    // 						//将当前图片试用绝对定位,下一张图片试用相对定位
    // 						$(".c-banner .banner ul img").eq(nexImg).css("position","absolute");
    // 						$(".c-banner .banner ul img").eq(jumpImg).css("position","relative");
    //
    // 						after.css("display","block");
    // 						after.stop().animate({"opacity":1},1000);
    // 						befor.stop().animate({"opacity":0},1000,function(){
    // 							befor.css("display","none");
    // 						});
    // 						nexImg=jumpImg;
    // 					}
    // 					$(this).css("background-color","black");
    // 					time =setInterval(intervalImg,3000);
    // 				});
    // 			});
    // 		}
    // 	})
    // }
</script>

</body>
</html>